<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    custom-class="dialog-my"
  >
    <el-form
      :model="form"
      :rules="rules"
      :label-position="'right'"
      label-width="120px"
      ref="myform"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="卡名称" prop="cardName">
            <el-input
              v-model="form.cardName"
              autocomplete="off"
              style="width: 224px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="卡类型">
            <el-select
              placeholder="请选择"
              style="width: 224px"
              v-model="test"
            >
              <el-option label="畅玩卡" value="1"> </el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="活动价" prop="salePrice">
            <el-input
              v-model="form.salePrice"
              autocomplete="off"
              style="width: 224px"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="原价" prop="originalPrice">
            <el-input
              v-model="form.originalPrice"
              autocomplete="off"
              style="width: 224px"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="使用天数" prop="days">
            <el-input
              v-model="form.days"
              autocomplete="off"
              style="width: 224px"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="日核销限制" prop="payLimit">
            <el-input
              v-model="form.payLimit"
              autocomplete="off"
              style="width: 224px"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="场次类型" prop="countInfo">
            <el-select
              v-model="form.cardType"
              placeholder="请选择"
              style="width: 224px"
            >
              <el-option label="全天" value="0"> </el-option>
              <el-option label="早" value="1"> </el-option>
              <el-option label="中" value="2"> </el-option>
              <el-option label="晚" value="3"> </el-option>
            </el-select> </el-form-item
        ></el-col>

        <el-col :span="12">
          <el-form-item label="排序" prop="weightValue">
            <el-input
              v-model="form.weightValue"
              autocomplete="off"
              style="width: 224px"
            ></el-input> </el-form-item
        ></el-col>
      </el-row>

      <hr />

      <el-form-item label="可使用时段" prop="cardStartTime">
        <el-time-select
          placeholder="起始时间"
          v-model="form.cardStartTime"
        >
        </el-time-select>
        <el-time-select
          placeholder="结束时间"
          v-model="form.cardEndTime"
          :picker-options="{
            start: '09:00',
            step: '00:30',
            end: '23:30',
            minTime: form.cardStartTime,
          }"
        >
        </el-time-select>
        <!-- <el-checkbox v-model="checked" @change="handleChangeCheck"
          >不限时段</el-checkbox
        > -->
      </el-form-item>
      <el-form-item label="场区设置" prop="gymRegionId">
        <el-select v-model="form.gymRegionId" placeholder="请选择场区">
          <el-option
            :label="item.regionName"
            :value="item.id"
            v-for="item in regionList"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="卡面照片" prop="cardPicUrl">
        <el-upload
          class="avatar-uploader"
          :action="baseUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :headers="{token:token}"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item> -->
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { dailyCardSave, regionPageList } from '@/config/api'
import { times, divide } from '@/utils/tools'
import { uploadFile, updatePassword } from "@/config/interface";

export default {
  data () {
    const validateDate = (rule, value, callback) => {
      if (this.form.cardStartTime&&this.form.cardEndTime) {
        callback()
      } else {
        return callback(new Error('请选择使用时段'));
      }
    }
    const validateDays = (rule, value, callback) => {
      if (value) {
        if (isNaN(value)) {
          return callback(new Error('有效期必须是数字'));

        }
        if (value <= 0) {
          return callback(new Error('有效期必须大于0'));
        } else {
          if (value % 1 !== 0) {
            return callback(new Error('有效期必须是整数'));
          } else {
            callback()
          }

        }

      } else {
        return callback(new Error('请输入支付有效期'));
      }
    }
    return {
      dialogFormVisible: false,
      title: '',
      test:'1',
      regionList: [],
     
      // checked: true,
      dateState: false,
      baseUrl: "",
      token:"",
      payType: [],
      imageUrl:"",
      form: {
        "cardName": undefined, //卡名称
        "cardType": undefined, //卡类型
        "salePrice": undefined, //售价
        "originalPrice": undefined, //原价
        "days": undefined, //有效期
        "payLimit": undefined, //日核销限制
        "cardStartTime": undefined, // 开始时段
        "cardEndTime": undefined, // 结束时段
        "datetimeStatus": 0, // 时段标识 1 限制 0 不限制
        "gymRegionId": undefined, // 场区id
        "platformStoreId": "2000042", // 门店id  -- 写死
        "platformCompanyId": "105", // 集团id  -- 写死
        "weightValue": "", // 排序
        // "cardPicUrl": ""
      },
      rules: {
       cardStartTime:[
       { validator: validateDate, trigger: 'blur' }

       ],
        cardName: [
          { required: true, message: '请输入卡名称', trigger: 'blur' }
        ],
        cardType: [
          { required: true, message: '请选择卡类型', trigger: 'change' }
        ],
        salePrice: [
          { required: true, message: '请输入售价', trigger: 'blur' }
        ],
        originalPrice: [
          { required: true, message: '请输入原价', trigger: 'blur' }
        ],
        days: [
          { validator: validateDays, trigger: 'blur' }
        ],
        payLimit: [
          { required: true, message: '请输入日核销限制', trigger: 'blur' }
        ],
        gymRegionId: [
          { required: true, message: '请选择场区', trigger: 'change' }
        ],
        weightValue: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ],
        days: [
          { required: true, message: '请输入使用天数', trigger: 'blur' }

        ],
        // cardPicUrl:[
        // { required: true, message: '请选择卡面图片', trigger: 'change' }

        // ]
      }
    }
  },
  methods: {
    addShow () {
      this.title = '新增卡'
      this.baseUrl = uploadFile();
      this.token = this.$store.state.login.token;

      this.resetFields()
      this.getRegion()
      this.dialogFormVisible = true
    },
    editShow (item) {
     console.log(item)
     this.baseUrl = uploadFile();
     this.token = this.$store.state.login.token;

      this.resetFields()
      this.getRegion()

      this.title = '编辑卡'
      this.form = {
        "cardName": item.cardName, //卡名称
        "cardType": item.cardType, //卡类型
        "salePrice": divide(item.salePrice, 100), //售价
        "originalPrice": divide(item.originalPrice, 100), //原价
        "days": item.days, //有效期
        "payLimit": item.payLimit, //日核销限制
        "cardStartTime": item.cardStartTime, // 开始时段
        "cardEndTime": item.cardEndTime, // 结束时段
        "datetimeStatus": item.datetimeStatus, // 时段标识 1 限制 0 不限制
        "gymRegionId": item.gymRegionId, // 场区id
        "platformStoreId": "2000042", // 门店id  -- 写死
        "platformCompanyId": "105", // 集团id  -- 写死
        "id": item.id,
        "weightValue": item.weightValue,
        // "cardPicUrl" : item.cardPicUrl
      }
      // this.imageUrl =  item.cardPicUrl

      // this.checked = item.datetimeStatus == 0 ? true : false
      this.dialogFormVisible = true
    },
    submit () {
      let timeState = (!this.form.cardStartTime || !this.form.cardEndTime)
      if (timeState && this.form.datetimeStatus == 1) {
        this.$confirm('可使用时段不能为空', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        return false
      }
      if(isNaN(this.form.salePrice)){
       this.$confirm('请输入正确的活动价', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        return false
      }
      if(isNaN(this.form.originalPrice)){
       this.$confirm('请输入正确的原价', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        return false
      }
      this.$refs['myform'].validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form))
          params.salePrice = times(params.salePrice, 100)
          params.originalPrice = times(params.originalPrice, 100)
          dailyCardSave(params).then(res => {
            this.$parent.getData()
            this.dialogFormVisible = false
            this.$message({
              message: '操作成功',
              type: 'success'
            });
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },


    // // 不限时段
    // handleChangeCheck (e) {
    //   if (e) {
    //     this.form.cardStartTime = ""
    //     this.form.cardEndTime = ""
    //     this.form.datetimeStatus = 0
    //   } else {
    //     this.form.datetimeStatus = 1
    //   }
    // },
    // 获取场区列表
    getRegion () {
      regionPageList({}).then(res => {
        console.log(res)
        this.regionList = res.data.result.list
      })
    },
    // 上传图片
    // handleAvatarSuccess (res, file) {
    //  this.imageUrl = URL.createObjectURL(file.raw);
    //   this.form.cardPicUrl = res.result;

    // },
    resetFields () {
      this.form = {
       "cardName": undefined, //卡名称
        "cardType": undefined, //卡类型
        "salePrice": undefined, //售价
        "originalPrice": undefined, //原价
        "days": undefined, //有效期
        "payLimit": undefined, //日核销限制
        "cardStartTime": undefined, // 开始时段
        "cardEndTime": undefined, // 结束时段
        "datetimeStatus": 0, // 时段标识 1 限制 0 不限制
        "gymRegionId": undefined, // 场区id
        "platformStoreId": "2000042", // 门店id  -- 写死
        "platformCompanyId": "105", // 集团id  -- 写死
        "weightValue": "", // 排序
        // "cardPicUrl": ""
      }
      // this.checked = true
      // this.imageUrl = ""
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>